<template>
  <v-label :config="config" @transformend="handleTransformEnd" @click="jump">
    <v-tag
      :config="{
        ...tagConfig,
        fill: config.bgColor,
        shadowColor: config.bgColor,
      }"
    />
    <v-text
      :config="{
        ...textConfig,
        text: config.text,
        fill: config.fontColor,
        fontSize: config.fontSize,
      }"
    />
  </v-label>
</template>

<script>
export default {
  name: "XJumpButton",
  props: {
    config: {
      type: Object
    }
  },
  mounted () {
  },
  methods: {
    handleTransformEnd (...p) {
      this.$emit('transformend', ...p)
    },
    jump () {
      console.log('跳转到:' + this.config.jumpTarget)
    }
  },
  data () {
    return {
      tagConfig: {

        pointerDirection: 'none',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',

        shadowBlur: 10,
        shadowOffset: 10,
        shadowOpacity: 0.5
      },
      textConfig: {
        fontFamily: 'Calibri',
        padding: 5,
      }
    };
  },
}
</script>
